<template>
	<div id="app">
		<el-row>
			<el-date-picker v-model="valueDate" type="daterange" align="right" format="yyyy-MM-dd" unlink-panels
				range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
			</el-date-picker>
			<el-select v-model="queryWhere.flag" placeholder="请选择回复状态">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-button type="primary" @click="initTableData" icon="el-icon-search">查询</el-button>

		</el-row>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>

		<el-table :data="fadeBackList" stripe border style="width: 100%">
			​ <el-table-column prop="nickname" label="昵称"></el-table-column>
			<el-table-column prop="tel" label="手机号"></el-table-column>
			<el-table-column prop="date_received" label="反馈时间"></el-table-column>
			<el-table-column label="回复状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.flag == 1" type="success">已回复 </el-tag>
					<el-tag v-if="scope.row.flag == 0" type="danger">未回复 </el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="reply_date" label="回复时间"></el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-chat-dot-round" circle @click="sendMessage(scope)">回复
					</el-button>
					<el-button type="danger" icon="el-icon-delete" circle @click="delData(scope)">删除</el-button>
				</template>
			</el-table-column>

		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>

		<el-dialog :title="fadeBackInfo.nickname" :visible.sync="dialogVisible" :before-close="handleClose">
			<JwChat :taleList="list" @enter="bindEnter" v-model="inputMsg" :toolConfig="tool" :quickList="quickList">
			</JwChat>
		</el-dialog>
		<el-dialog title="删除反馈" :visible.sync="delDialogVisible" width="30%">
			<span>是否删除</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleteMermber">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		created: function() {
			this.username = window.sessionStorage.getItem("username");
			/* this.img=window.sessionStorage.getItem("img");
			console.log("img",this.img) */
			this.access_token = window.sessionStorage.getItem("token");
      this.touxiang=window.sessionStorage.getItem("touxiang");
		},
		mounted: function() {
			this.initTableData();
		},
		methods: {
			// 时间格式化函数，此处仅针对yyyy-M-ddhh:mm:ss的格式进行格式化
			dateFormat: function(time) {
				var date = new Date(time);
				var year = date.getFullYear();
				/*在日期格式中，月份是从0开始的，因此要加0
				 *使用三元表达式在小于10的前面加，以达到格式统一如09:11:05*/

				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				//拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			},

			delData: function(scope) {
				this.delDialogVisible = true;
				this.fadeback_id = scope.row.fadeback_id;
			},

			deleteMermber: function() {
				let This = this;
				let url = "/api/mall/FadeBackServlet.do?method=deleteById";
				console.log(this.fadeback_id);
				this.$http.get(url, {
					params: {
						fadeback_id: this.fadeback_id
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						This.delDialogVisible = false;
						This.initTableData();
					}
				}).catch(function(error) {
					This.$notify({
						title: "提示",
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			bindEnter(e) {
				this.updatefadeBackList.reply_date = this.dateFormat(new Date());
				this.updatefadeBackList.flag = 1;
				const msg = this.inputMsg;
				if (!msg) return;
				const msgObj = {
					// data 用来展示时间数据
					// text 用来展示本条会话内容
					// mine 本条数据是否是我发的
					// img 用户头像
					"date": this.updatefadeBackList.reply_date,
					"text": {
					"text": msg
					},
					"mine": true,
					"name": this.username,
					"img": this.touxiang
				}
				this.list.push(msgObj)
			},
			handleClose(done) {
				let This = this;
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
						This.updateFadeBack();
					})
					.catch(_ => {});
			},
			updateFadeBack: function() {
				let This = this;
				let url = "/api/mall/FadeBackServlet.do?method=update";
				this.$http.get(url, {
					params: this.updatefadeBackList
				}).then(function(response) {
					console.log("response", response);
					if (response.data.code == 0) {
						This.dialogVisible = false;
						This.initTableData();
					}
				}).catch(function(error) {
					This.$notify({
						title: "提示",
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			initTableData: function() {

				let _this = this;
				let url = "/api/mall/FadeBackServlet.do?method=query&access_token="+this.access_token;
				if (this.valueDate != null) {
					var start_date = this.valueDate[0];
					var end_date = this.valueDate[1];
				};
				this.$http.get(url, {
					// params: [_this.queryWhere,start_date,end_date]
					params: {
						start_date: start_date,
						end_date: end_date,
						currentPage: this.queryWhere.currentPage,
						flag: this.queryWhere.flag
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						_this.queryWhere.currentPage = response.data.data.currentPage;
						_this.pageInfo.totalPage = response.data.data.totalPage;
						_this.pageInfo.totalRecord = response.data.data.totalRecord;

						_this.pageInfo.pageSize = response.data.data.pageSize;

						_this.fadeBackList = response.data.data.data;
						console.log("	_this.fadeBackList", _this.fadeBackList);
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},
			sendMessage: function(scope) {
				this.dialogVisible = true;
				this.updatefadeBackList.fadeback_id = scope.row.fadeback_id;
				this.updatefadeBackList.flag = scope.row.flag;
				for (let attr in this.fadeBackInfo) {
					this.fadeBackInfo[attr] = scope.row[attr]
				}
				const list = [{
					"date": this.fadeBackInfo.date_received,
					"text": {
					"text": this.fadeBackInfo.info
					},
					"mine": false,
					"name": this.fadeBackInfo.nickname,
					"img": this.fadeBackInfo.file
				}, ]
				this.list = list
			},
			handleSizeChange: function() {
				alert("修改了每页显示的记录数");
			},
			handleCurrentChange: function(curPage) {
				this.queryWhere.currentPage = curPage; //当页页
				this.initTableData(); //重新查数据库。。
			}
		},
		data: function() {
			return {
				//记录token
				access_token: "",
				username: '',
        touxiang:'',
				/* img:'', */
				inputMsg: '',
				list: [],
				tool: {
					callback: this.toolEvent
				},
				quickList: [{
					text: '好的'
				}, ],
				fadeBackList: [],
				dialogVisible: false,
				queryWhere: {
					flag: 2,
					currentPage: 1
				},
				fadeBackInfo: {
					date_received: '',
					info: '',
					nickname: '',
					file: '',
				},
				updatefadeBackList: {
					flag: '',
					reply_date: '',
					fadeback_id: '',
				},
				pageInfo: {
					pageSize: 5,
					totalPage: 0,
					totalRecord: 0
				},
				valueDate: '',
				delDialogVisible: false,
				fadeback_id: '',
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}],
				},
				options: [{
					value: 2,
					label: '查询所有'
				}, {
					value: 1,
					label: '已回复'
				}, {
					value: 0,
					label: '未回复'
				}],



			}
		}
	}
</script>

<style>
</style>
